import './imports.js';

import Header from '../components/Header/index.js';
import NavBar from '../components/NavBar/index.js';
import NewsList from '../components/NewsList/index.js';
import PageLoading from '../components/PageLoading/index.js';
import MoreLoading from '../components/MoreLoading/index.js';

import { scrollToBottom } from '../libs/utils.js';
import { news_type } from '../data/index.js';
import servers from '../services/index.js';


;((doc) => {
    const oApp = doc.querySelector('#app');
    let oListWrapper = null;
    let t = null; 
    const config = {
        type: 'top',
        count: 15,
        pageNum: 0,
        isLoading: false
    };
    const newsData = {};

    const init = async () => {
        
        render();
        await setNewList();
        bindEvent();
    };

    function bindEvent(){
        NavBar.bindEvent(setType);
        NewsList.bindEvent(oListWrapper, setCurrentNews);
        window.addEventListener('scroll', scrollToBottom.bind(null, getMoreList), false);
    }

    function render(){
        const headerTpl = Header.tpl({
            url: '/',
            title: '新闻头条',
            showLeftIcon: false,
            showRightIcon: true
        });
        const navBar = NavBar.tpl(news_type); 
        const listWrapperTpl = NewsList.wrapper(8.2);


        oApp.innerHTML += (headerTpl + navBar + listWrapperTpl) ;
        oListWrapper = oApp.querySelector('.new-list');
    }; 


    init();

    // 切换新闻列表
    function setType(type){
        config.type = type;
        config.pageNum = 0;
        config.isLoading = false;
        oListWrapper.innerHTML = '';
        setNewList();
    }

    // 切换新闻列表时，执行的函数。
    async function setNewList (){
        const { type, count, pageNum} = config;

        if(newsData[type]){
            renderList(newsData[type][pageNum]);
            return ;
        }
        oListWrapper.innerHTML = PageLoading.tpl();
        newsData[type] = await servers.getNewList(type, count);
        setTimeout(() => {
            oListWrapper.innerHTML = '';
            renderList(newsData[type][pageNum]);
        }, 1500)
        
    };

    // 渲染新闻列表    
    function renderList(data){
        const { pageNum } = config;

        const newsListTpl = NewsList.tpl({
            data,
            pageNum
        });
        MoreLoading.remove(oListWrapper);
        oListWrapper.innerHTML += newsListTpl;
        config.isLoading = false;
        NewsList.imgShow();
    }

    // 获取更多数据

    function getMoreList(){
        if(!config.isLoading){
            clearTimeout(t);
            config.pageNum ++;

            const { pageNum, type} = config;
            if(pageNum >= newsData[type].length){
                MoreLoading.add(oListWrapper,false);
            }else{
                config.isLoading = true;
                MoreLoading.add(oListWrapper, true);
                t = setTimeout(() => {
                    setNewList();
                },1000)
            }
        }
    }

    function setCurrentNews(options){
        const { idx, pageNum} = options;

        const currentNews = newsData[config.type][pageNum][idx];
        
        localStorage.setItem('currentNews',JSON.stringify(currentNews));
    }
    
})(document)

